<template>
  <!-- 容易造成屎山 -->
  <!-- <el-input v-model="modelValue.keyword" :placeholder="modelValue.placeholder"> -->
  <!-- 方式1 v-modlel 拆解 -->
  <!-- <el-input
    :modelValue="modelValue.keyword"
    @update:modelValue="handleKeywordChange"
    :placeholder="modelValue.placeholder"
  > -->
  <!-- 方式2 计算属性 -->
  <!-- <el-input v-model="keyword" :placeholder="modelValue.placeholder"> -->
  <el-input v-model="model.keyword" :placeholder="modelValue.placeholder">
    <template #prepend>
      <!-- <el-select
        v-model="modelValue.selectedValue"
        placeholder="Select"
        style="width: 85px"
      > -->
      <el-select
        v-model="model.selectedValue"
        placeholder="Select"
        style="width: 85px"
      >
        <!-- <el-option
          v-for="item in modelValue.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option> -->
        <el-option
          v-for="item in model.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>

    <template #append>
      <el-button :icon="Search"></el-button>
    </template>
  </el-input>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useVModel } from "./useVModel";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);
const model = useVModel(props, "modelValue", emit);
/*const model = computed({
  get() {
    return new Proxy(props.modelValue, {
      get(target, key) {
        return Reflect.get(target, key)
      },
      set(target, key, value) {
        console.log('key, value', key, value)
        emit('update:modelValue', {
          ...target,
          [key]: value,
        })
      },
    })
  },

  // set(val) {
  //  emit('update:modelValue', val)
  // },
})*/

/*const keyword = computed({
  get() {
    return props.modelValue.keyword
  },
  set(val) {
    console.log('val', val)
    emit('update:modelValue', {
      ...props.modelValue,
      keyword: val,
    })
  },
})*/

/*
function handleKeywordChange(value) {
  console.log('value', value)
  emit('update:modelValue', {
    ...props.modelValue,
    keyword: value,
  })
}*/
</script>
